<template>
  <div>
    <BasicTable @register="registerTable" :loading="loading">
      <template #tableTitle>
        <a-button @click="onAdd" type="primary" preIcon="ant-design:plus">新增</a-button>
      </template>
      <template #switch="{ text, record }"> <a-switch size="small" :checked="record.status === 1" @click="onUpdateStatus(record)" /> </template>
      <template #action="{ record }"> <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)" /> </template>
    </BasicTable>
    <BasicModal v-bind="formModalProps">
      <template #default>
        <a-spin :spinning="formModalProps.confirmLoading">
          <BasicForm @register="registerForm" />
        </a-spin>
      </template>
    </BasicModal>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, watch, reactive, nextTick } from 'vue';
  import { BasicTable, TableAction, useTable } from '/@/components/Table';
  import { BasicModal, useModal } from '/@/components/Modal';
  import { BasicForm, useForm } from '/@/components/Form';
  import { authDataLoadData, authDataSaveOrUpdate, authDataUpdateStatus, authDataDelete } from '../auth.api';
  import { authDataColumns, useAuthDataFormSchemas, USE_SQL_RULES } from '../auth.data';

  export default defineComponent({
    name: 'AuthDataConfig',
    components: { BasicTable, TableAction, BasicModal, BasicForm },
    props: {
      cgformId: { type: String, required: true },
      authFields: { type: Array, required: true },
    },
    setup(props) {
      const loading = ref(false);
      const [registerTable, { reload, setLoading }] = useTable({
        api: (params) => authDataLoadData(props.cgformId, params),
        rowKey: 'id',
        bordered: true,
        columns: authDataColumns,
        showIndexColumn: false,
        actionColumn: {
          width: 120,
          title: '操作',
          fixed: false,
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
      });
      watch(loading, (l) => setLoading(l));
      const [registerModal, { openModal, closeModal }] = useModal();
      const formModalProps = reactive({
        title: '',
        width: 800,
        confirmLoading: false,
        onOk: onSubmit,
        onCancel: closeModal,
        onRegister: registerModal,
      });
      let isUpdate = false;
      let formRecord = {};
      const { formSchemas } = useAuthDataFormSchemas(props, {
        onRuleOperatorChange,
      });
      const [registerForm, { validate, resetFields, setFieldsValue }] = useForm({
        schemas: formSchemas,
        showActionButtonGroup: false,
        labelAlign: 'right',
      });
      watch(
        () => props.cgformId,
        () => {
          reload().catch(() => null);
        },
        { immediate: true }
      );
      async function openFormModal(data) {
        var _a;
        isUpdate = (_a = data.isUpdate) != null ? _a : false;
        formModalProps.title = data.title;
        openModal();
        await nextTick();
        await resetFields();
        formRecord = Object.assign({}, data.record);
        await setFieldsValue(formRecord);
      }
      function onAdd() {
        openFormModal({ title: '新增' });
      }
      function onEdit(record) {
        openFormModal({ title: '编辑', record, isUpdate: true });
      }
      function onDelete(id) {
        loading.value = true;
        authDataDelete(id)
          .then(reload)
          .finally(() => (loading.value = false));
      }
      async function onSubmit() {
        try {
          formModalProps.confirmLoading = true;
          let formData = await validate();
          formData = Object.assign({}, formRecord, formData);
          if (formData.ruleOperator == USE_SQL_RULES) {
            formData.ruleColumn = '';
          }
          formData.cgformId = props.cgformId;
          await authDataSaveOrUpdate(formData, isUpdate);
          reload();
          closeModal();
        } finally {
          formModalProps.confirmLoading = false;
        }
      }
      function onUpdateStatus(record) {
        loading.value = true;
        let status = Math.abs(record.status - 1);
        authDataUpdateStatus(Object.assign({}, record, { status }))
          .then(() => {
            record.status = status;
          })
          .finally(() => {
            loading.value = false;
          });
      }
      function onRuleOperatorChange(val) {
        if (val == USE_SQL_RULES) {
          setFieldsValue({
            ruleColumn: '',
          });
        }
      }
      function getTableAction(record) {
        return [
          {
            label: '编辑',
            onClick: () => onEdit(record),
          },
        ];
      }
      function getDropDownAction(record) {
        return [
          {
            label: '删除',
            popConfirm: {
              title: '确定删除吗？',
              placement: 'left',
              confirm: () => onDelete(record.id),
            },
          },
        ];
      }
      return {
        loading,
        formModalProps,
        onAdd,
        onUpdateStatus,
        getTableAction,
        getDropDownAction,
        registerTable,
        registerModal,
        registerForm,
      };
    },
  });
</script>
<style scoped></style>
